<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
</head>

<body>
    <button>卸载按钮</button>
    <div id="root"></div>
</body>
<script type="text/babel">
    // const root = ReactDOM.createRoot(document.querySelector('#root'))
    // 卸载方法 一、使用 &&
    // class App extends React.Component {
    //     state = {
    //         isShow: true
    //     }
    //     constructor() {
    //         super()
    //         console.log('1-constructor')
    //     }
    //     UNSAFE_componentWillMount() {
    //         console.log('2-UNSAFE_componentWillMount')
    //     }
    //     render(){
    //         console.log('3-render')
    //         return (
    //             <div>
    //                 <button onClick={()=>{
    //                     this.setState({
    //                         isShow: !this.state.isShow
    //                     })
    //                 }}>显示与隐藏</button>
    //                 {
    //                     this.state.isShow && <Child />
    //                 }
    //             </div>
    //         )
    //     }
    //     componentDidMount() {
    //         console.log('8-componentDidMount')
    //     }
    // }

    // // Child组件
    // class Child extends React.Component{
    //     state = {
    //         num: 1
    //     }
    //     constructor() {
    //         super()
    //         console.log('4-child->constructor')
    //     }
    //     UNSAFE_componentWillMount() {
    //         console.log('5-child->UNSAFE_componentWillMount')
    //     }
    //     render() {
    //         console.log('6-child->render')
    //         return (
    //             <div>
    //                 <h3>Child:{this.state.num}</h3>
    //             </div>
    //         )
    //     }
    //     componentDidMount() {
    //         console.log('7-child-componentDidMount')
    //         this.timer = setInterval(()=> {
    //             console.log(11111111)
    //             this.setState({
    //                 num: this.state.num + 1
    //             })
    //         }, 1000)
    //     }
    //     componentWillUnmount() {
    //         // 组件销毁之前执行钩子函数，清除定时器
    //         clearInterval(this.timer)
    //         console.log('componentWillUnmount')
    //     }
    // }

    // 卸载方法二：通过unmount方法卸载
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    class App extends React.Component {
        render() {
            return (
                <div>
                    <button onClick={() => {
                        root.unmount()
                    }}>卸载App</button>
                    <h3>App</h3>
                </div>
            )
        }
        componentWillUnmount(){
            console.log("componentWillUnmount")
        }
    }
    root.render(<App />)
    const btn = document.querySelector('button')
    btn.onclick = function() {
        root.unmount()
    }







</script>

</html>